<!--
// +----------------------------------------------------------------------
// | Created by PHPstorm: JRKAdmin框架 [ JRKAdmin ]
// +----------------------------------------------------------------------
// | Copyright (c) 2019~2022 [LuckyHHY] All rights reserved.
// +----------------------------------------------------------------------
// | SiteUrl: http://www.luckyhhy.cn
// +----------------------------------------------------------------------
// | Author: LuckyHhy <jackhhy520@qq.com>
// +----------------------------------------------------------------------
// | Date: 2020/3/11-14:46
// +----------------------------------------------------------------------
// | Description:
// +----------------------------------------------------------------------
*-->
{extend name='public/window' /}

{block name="content"}


<link rel="stylesheet" type="text/css" href="__PLUGS__/plupload/css/upload.css">


<input type="text"  id="dz"  style="width: 369px;">

<div class="demo clearfix" style="width:600px;margin:120px auto">
    <a onclick="showVideoUploadBox($('#btn_video'))" id="btn_video" class="item"><i class="icon_emot_photo_video icon_video"></i><span>视频</span></a>
</div>

<div class="video_box_outside" id="video_box_outside" tabindex="2001">
    <div class="video_box">
        <a class="photo_upload_close"href="javascript:void(0);"onclick="fadeout_div('#video_box_outside')"></a>
        <div id="video_upload_area">

            <a class="video_upload_btn" id="video_upload_btn">+</a>

            <div class="video_textarea_upload" id="video_textarea_upload">
                <div class="video_upload_words">

                </div>
                <span id="video_words_num">0</span>
            </div>
            <div class="video_notice">支持上传大小在1GB以内的视频，请勿上传色情、反动等违法视频</div>
        </div>

        <div class="layer_point">
            <dl id="video_loading" class="point clearfix" style="display: none;padding: 0 0 60px">
                <dt style="" id="loading_bar">
                    <span class="loading_bar"><em id="percent" style="width: 27%;"></em></span>
                    <span id="percentnum" class="S_txt2 load_num">27%</span>
                </dt>
                <dd>
                    <p id="updesc">视频上传中...</p>
                    <p class="S_txt2"><label id="uploading_tip">上传速度取决于您的网速，请耐心等待。</label>
                    </p>
                </dd>
            </dl>
            <div id="video_success" style="display: none">
                <dl class="point clearfix">
                    <dt>
                        <span class="W_icon icon_succB"></span>
                    </dt>
                    <dd>
                        <p id="upload_succ">视频上传成功</p>
                    </dd>
                </dl>
                <div class="upload_know">
                    <a class="btn" href="javascript:void(0);" onclick="fadeout_div('#video_box_outside')">我知道了</a>
                </div>
            </div>
        </div>
        <div class="upload_video_area" id="upload_video_area">
            <a id="upload_video" class="btn disabled" href="javascript:void(0);">开始上传</a>
        </div>
        <div class="arrow_layer"><span class="arrow_top_area"><i class="arrow_top_bg"></i><em class="arrow_top"></em></span></div>
    </div>

</div>
<script type="text/javascript" src="__PLUGS__/plupload/js/plugins/plupload/plupload.full.min.js"></script>

<script >
    var dz=[];
    var uploader_video = new plupload.Uploader({
        runtimes: 'gears,html5,html4,silverlight,flash',
        browse_button: ['video_upload_btn'], // 上传按钮
        url: "{:url('admin/upload/UpVideo')}", //远程上传地址
        flash_swf_url: '__PLUGS__/plupload/js/plugins/plupload/Moxie.swf', //flash文件地址
        silverlight_xap_url: '__PLUGS__/plupload/js/plugins/plupload/Moxie.xap', //silverlight文件地址
        filters: {
            max_file_size: '1gb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
            mime_types: [//允许文件上传类型
                {title: "files", extensions: "mp4,flv,3gp,mov,avi,rmvb,mkv,wmv"}
            ]
        },
        multi_selection: true, //true:ctrl多文件上传, false 单文件上传
        init: {
            FilesAdded: function(up, files) { //文件上传前
                var file_length=$(".video_name_box").length;
                    for (var i=0;i<files.length;i++) {
                       var k=' <a class="video_name_box"  href="javascript:void(0)">\n' +
                           '                        <img src="__PLUGS__/plupload/images/icon_video.png" style="width:13.5px;height: 9px"/>\n' +
                            '                       '+files[i].name+'\n' +
                            '                        <span class="photo_upload_close ck"  ></span>\n' +
                            '                    </a><br/>';
                        if (file_length ==6){
                           alert("最多添加6个视频");
                        } else {
                            $(".video_upload_words").append(k);
                        }
                    }


                $(".video_name_box").css({"display": "inline-block"});

                $("#upload_video").removeClass("disabled");

                $("#upload_video").click(function() {
                    uploader_video.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
                });

            },
            UploadProgress: function(up, file) { //上传中，显示进度条
                $("#video_loading").show();
                $('#upload_video_area,#video_upload_area').hide();
                var percent = file.percent;
                $("#percent").css({"width": percent + "%"});
                $("#percentnum").text(percent + "%");
                $("#video_success").hide();

            },
            FileUploaded: function(up, file, info) { //文件上传成功的时候触发
                $("#video_loading").hide();
                $("#video_success").show();
                var data = eval("(" + info.response + ")");//解析返回的json数据
                var k=$("#dz");
                var dz=k.val();

                if (dz==null || dz==''){
                    k.val(data.file);
                }else {
                    k.val(dz+","+data.file);
                }

               // alert(data.code+data.path);
               // console.log(data);

            },
            Error: function(up, err) { //上传出错的时候触发
                alert(err.message);
            }
        }
    });


    uploader_video.init();

    function showVideoUploadBox(obj) { //显示上传弹出层
        var left = obj.offset().left;
        var top = obj.offset().top + 26;
        var z_index_init = 1000;
        if ($("#post_box").css("display") == 'block') {
            z_index_init = 3000;
        }
        $("#photo_upload_box_outside").css({"z-index": z_index_init});

        $("#video_box_outside").css({"left": left, "top": top, "z-index": z_index_init + 1}).show();
        $("#video_upload_area").show();
        $("#video_loading,#video_success").hide();
        reupload_video();
    }

    //重新上传
    function reupload_video() {
        $('#video_upload_btn').show();
        $('#video_name_box').hide();
        $("#upload_video_area").show().addClass("disabled");
        $("#video_success").hide();

    }

    /**
     * 删除
     */
    $(document).on("click",".ck",function(){
        var msg="确定移除该视频吗？";
        if (confirm(msg)==true){
            var file_id=$(this).attr("data-id");
            var obj_file = uploader_video.getFile(file_id);
            uploader_video.removeFile(obj_file);

            $(this).parent().remove();
            return true;
        }else{
            return false;
        }
    });


    function video_upload_cancel() {  //取消上传
        uploader_video.stop();
        $("#video_loading,#video_name_box").hide();
        $("#video_upload_area,#video_upload_btn").show();
        $("#upload_video_area").show();
        $("#upload_video").addClass("disabled");
        $("#video_text").val("");
        $("#video_words_num").text(0);
        $("#video_success").hide();
        $("#video_file,#video_name").val("");
        var file_id = $("#video_iput").attr("file_id");
        var obj_file = uploader_video.getFile(file_id);
        uploader_video.removeFile(obj_file);
    }

    function fadeout_div(id) {
        $(id).fadeOut();
    }
</script >




{/block}